<style>
    /* 分类列表页面样式 */
    .category-container {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .search-bar {
        margin-bottom: 20px;
    }
    
    .layui-input {
        width: 300px;
    }
    
    .btn-group {
        margin-bottom: 20px;
        text-align: right;
    }
    
    .layui-table {
        width: 100%;
    }
    
    .action-buttons {
        white-space: nowrap;
    }
    
    /* 表单样式 */
    .form-container {
        padding: 20px;
    }
    
    .layui-form-label {
        width: 100px;
    }
    
    .layui-input-block {
        margin-left: 130px;
    }
</style>

<div class="category-container">
    <h1>分类管理</h1>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="layui-input-group">
       
            <input type="text" id="categorySearch" placeholder="搜索分类名称" class="layui-input">
        </div>
    </div>
    
    <!-- 操作按钮组 -->
    <div class="btn-group">
        <button class="layui-btn layui-btn-primary" id="refreshBtn">
            <i class="layui-icon layui-icon-refresh"></i> 刷新
        </button>
        <button class="layui-btn" id="addCategoryBtn">
            <i class="layui-icon layui-icon-add-circle"></i> 添加分类
        </button>
    </div>
    
    <!-- 分类列表表格 -->
    <table class="layui-table" id="categoryTable" lay-filter="categoryTable">

        <tbody id="categoryTableBody">
            <!-- 分类数据将通过JavaScript动态生成 -->
        </tbody>
    </table>
</div>

<!-- 操作工具栏模板 -->
<script type="text/html" id="actionToolbar">
    <div class="action-buttons">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>

<!-- 编辑分类表单弹出层 -->
<div id="editCategoryModal" style="display: none;">
    <div class="form-container">
        <form class="layui-form" id="editCategoryForm">
            <input type="hidden" name="cid" id="editCid">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="editName" required  lay-verify="required" placeholder="请输入分类名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="editCategorySubmit">确认</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="closeEditModal">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // 初始化layui组件
    layui.use(['table', 'form', 'layer', 'jquery'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        
        // 存储分类数据
        var categoryData = [];
        
        // 获取用户信息
        var userInfo = window.user_info || {};
        console.log("用户信息: ", userInfo);
        
        var userId = userInfo.uid || '';
        
        // 渲染表格
        var categoryTable = table.render({
            elem: '#categoryTable',
            data: categoryData,
            cellMinWidth: 80,
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            cols: [[
                {field: 'cid', width: 200, title: '分类ID'},
                {field: 'name', width: 400, title: '分类名称'},
                {field: 'create_time', width: 200, title: '创建时间'},
                {fixed: 'right', width: 150, align: 'center', toolbar: '#actionToolbar', title: '操作'}
            ]]
        });
        
        /**
         * 本地搜索功能
         */
        document.getElementById('categorySearch').addEventListener('input', function() {
            var keyword = this.value.toLowerCase();
            
            // 过滤数据
            var filteredData = categoryData.filter(function(item) {
                return item.name.toLowerCase().indexOf(keyword) !== -1 || 
                       item.cid.toLowerCase().indexOf(keyword) !== -1;
            });
            
            // 重新渲染表格
            categoryTable.reload({
                data: filteredData,
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
        });
        
        /**
         * 刷新按钮点击事件
         */
        document.getElementById('refreshBtn').addEventListener('click', function() {
            loadCategoryList();
            // 清空搜索框
            document.getElementById('categorySearch').value = '';
        });
        
        /**
         * 添加分类按钮点击事件
         */
        document.getElementById('addCategoryBtn').addEventListener('click', function() {
            // 清空表单
            document.getElementById('editCid').value = '';
            document.getElementById('editName').value = '';
            
            // 打开弹窗
            layer.open({
                type: 1,
                title: '添加分类',
                content: $('#editCategoryModal'),
                area: ['500px', '250px'],
                success: function() {
                    // 重新渲染表单以确保样式正确
                    form.render();
                }
            });
        });
        
        /**
         * 关闭编辑弹窗
         */
        document.getElementById('closeEditModal').addEventListener('click', function() {
            layer.closeAll('page');
        });
        
        /**
         * 监听表格工具条事件
         */
        table.on('tool(categoryTable)', function(obj) {
            var data = obj.data; // 获取当前行数据
            var layEvent = obj.event; // 获取lay-event对应的值
            
            if (layEvent === 'edit') {
                // 编辑操作
            document.getElementById('editCid').value = data.cid;
            document.getElementById('editName').value = data.name;
            
            layer.open({
                    type: 1,
                    title: '编辑分类',
                    content: $('#editCategoryModal'),
                    area: ['500px', '250px'],
                    success: function() {
                        // 重新渲染表单以确保样式正确
                        form.render();
                    }
                });
            } else if (layEvent === 'delete') {
                // 删除操作
                layer.confirm('确定要删除这个分类吗？删除后相关的记账记录可能会受到影响。', {
                    btn: ['确定', '取消']
                }, function() {
                    // 调用删除分类函数
                    deleteCategory(data.cid);
                    layer.closeAll('dialog');
                });
            }
        });
        
        /**
         * 监听编辑表单提交
         */
        form.on('submit(editCategorySubmit)', function(data) {
            var cid = data.field.cid;
            var name = data.field.name;
            
            // 检查分类名称是否重复
            if (isCategoryNameExists(name, cid)) {
                layer.msg('分类名称已存在', {icon: 2});
                return false;
            }
            
            if (cid) {
                // 更新分类
                updateCategory(cid, name);
            } else {
                // 添加分类
                addCategory(name);
            }
            
            // 关闭弹窗
            layer.closeAll('page');
            
            return false;
        });
        
        /**
         * 加载分类列表（通过API）
         */
        function loadCategoryList() {
            // 检查用户ID是否存在
            if (!userId) {
                layer.msg('用户信息未获取，请刷新页面重试', {icon: 2});
                fallbackToMockData();
                return;
            }
            
            $.ajax({
                url: '/api/category/list/',
                type: 'GET',
                data: {
                    uid: userId
                },
                dataType: 'json',
                success: function(res) {
                    // 根据API实际返回格式，成功状态码为0
                    if (res.code === 0 && res.data) {
                        // 为返回的数据添加create_time字段（如果不存在）
                        res.data.forEach(item => {
                            // 确保create_time有值，如果没有则显示当前时间
                            if (!item.create_time) {
                                // 创建一个当前时间的格式化字符串
                                const now = new Date();
                                const year = now.getFullYear();
                                const month = String(now.getMonth() + 1).padStart(2, '0');
                                const day = String(now.getDate()).padStart(2, '0');
                                const hours = String(now.getHours()).padStart(2, '0');
                                const minutes = String(now.getMinutes()).padStart(2, '0');
                                const seconds = String(now.getSeconds()).padStart(2, '0');
                                
                                item.create_time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                            }
                        });
                        
                        categoryData = res.data;
                        // 重新渲染表格
                        categoryTable.reload({
                            data: categoryData
                        });
                        
                        // 显示成功消息
                        if (res.message) {
                            layer.msg(res.message, {icon: 1, time: 1000});
                        }
                    } else {
                        layer.msg('获取分类列表失败：' + (res.message || '未知错误'), {icon: 2});
                        // 如果API调用失败，使用模拟数据
                        fallbackToMockData();
                    }
                },
                error: function() {
                    layer.msg('网络错误，无法获取分类列表', {icon: 2});
                    // 如果API调用失败，使用模拟数据
                    fallbackToMockData();
                }
            });
        }
        
        /**
         * 当API调用失败时使用的模拟数据
         */
        function fallbackToMockData() {
            categoryData = [
                {cid: 'uuid-001', name: '餐饮', create_time: '2024-05-01 10:30:00'},
                {cid: 'uuid-002', name: '交通', create_time: '2024-05-01 11:00:00'},
                {cid: 'uuid-003', name: '购物', create_time: '2024-05-02 09:15:00'},
                {cid: 'uuid-004', name: '娱乐', create_time: '2024-05-02 14:20:00'},
                {cid: 'uuid-005', name: '医疗', create_time: '2024-05-03 16:45:00'}
            ];
            categoryTable.reload({
                data: categoryData
            });
        }
        
        /**
         * 检查分类名称是否存在
         */
        function isCategoryNameExists(name, excludeCid) {
            for (var i = 0; i < categoryData.length; i++) {
                if (categoryData[i].name === name && categoryData[i].cid !== excludeCid) {
                    return true;
                }
            }
            return false;
        }
        
        /**
         * 添加分类（通过API）
         */
        function addCategory(name) {
            // 检查用户ID是否存在
            if (!userId) {
                layer.msg('用户信息未获取，请刷新页面重试', {icon: 2});
                return;
            }
            
            $.ajax({
                url: '/api/category/create/',
                type: 'POST',
                data: {
                    uid: userId,
                    name: name
                },
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg(res.message || '分类添加成功', {icon: 1});
                        // 重新加载分类列表
                        loadCategoryList();
                    } else {
                        layer.msg('添加分类失败：' + (res.message || '未知错误'), {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('网络错误，无法添加分类', {icon: 2});
                }
            });
        }
        
        /**
         * 更新分类（通过API）
         */
        function updateCategory(cid, name) {
            // 检查用户ID是否存在
            if (!userId) {
                layer.msg('用户信息未获取，请刷新页面重试', {icon: 2});
                return;
            }
            
            $.ajax({
                url: '/api/category/update/' + cid + '/',
                type: 'POST',
                data: {
                    uid: userId,
                    name: name
                },
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg(res.message || '分类更新成功', {icon: 1});
                        // 重新加载分类列表
                        loadCategoryList();
                    } else {
                        layer.msg('更新分类失败：' + (res.message || '未知错误'), {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('网络错误，无法更新分类', {icon: 2});
                }
            });
        }
        
        /**
         * 删除分类（通过API）
         */
        function deleteCategory(cid) {
            // 检查用户ID是否存在
            if (!userId) {
                layer.msg('用户信息未获取，请刷新页面重试', {icon: 2});
                return;
            }
            
            $.ajax({
                url: '/api/category/delete/' + cid + '/',
                type: 'POST',
                data: {
                    uid: userId
                },
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg(res.message || '分类删除成功', {icon: 1});
                        // 重新加载分类列表
                        loadCategoryList();
                    } else {
                        layer.msg('删除分类失败：' + (res.message || '未知错误'), {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('网络错误，无法删除分类', {icon: 2});
                }
            });
        }
        
        // 初始化加载分类列表
        loadCategoryList();
    });
</script>